import React, {useState, useEffect} from 'react';
import EchartBase from '@component/echartBase';
import Amount from '@component/amount';
import date from '../../images/date.png';
import weather from '../../images/weather.png';
import title from '../../images/title.png';
import {http} from "../../utils";
import API from "../../config/api";
import jsonp from 'jsonp'


export default (props) => {

	const [wt, setWt] = useState({});

	const [mytime, setMytime] = useState(new Date().toLocaleString())


	const {amount, ele} = props;

	useEffect(() => {

		const timer = setInterval(() => {
			setMytime(new Date().toLocaleString());
		}, 1000)
		return () => {
			clearInterval(timer)
		};
	}, []);

	useEffect(() => {

		jsonp(
			API.GET_WEATHER,
			{
				param: 'callback',
			},
			function (err, response) {
				console.log('response.results[0].weather_data[0]', response.results[0].weather_data[0])
				setWt(response.results[0].weather_data[0])
			}
		);
	}, []);

	// date: "周三 07月22日 (实时：31℃)"
	// dayPictureUrl: "http://api.map.baidu.com/images/weather/day/xiaoyu.png"
	// nightPictureUrl: "http://api.map.baidu.com/images/weather/night/yin.png"
	// temperature: "37 ~ 27℃"
	// weather: "小雨转阴"
	// wind: "西南风4-5级"

	return (
		<div className="base-left">

			<div className="common-date">
				<div className="date">
					<img src={date}/>
					<span>{mytime}</span>
				</div>
				<div className={'weather'}>
					<img src={wt.dayPictureUrl}/>
					<span>{wt.weather} {wt.temperature}</span>
				</div>
			</div>
			<Amount amount={amount} ele={ele}/>

		</div>

	)
}
